<template>
	<view>
		<view class="tit">个人信息</view>
		
		<view class="edit-panel">
			<view class="line-box u-flex" style="border-bottom: 0;">
				<view class="title">职业信息</view>
				<input type="text" v-model="job" placeholder="请填写"/>
			</view>
		</view>
		<view class="tit">亲属信息</view>
		
		<view class="edit-panel">
			<view class="line-box u-flex">
				<view class="title">姓名</view>
				<input type="text" v-model="real_name" placeholder="请输入的姓名"/>
			</view>
			<view class="line-box u-flex">
				<view class="title">手机号</view>
				<input type="number" v-model="mobile" placeholder="请填写收货人的手机号码"/>
			</view>
			<view class="line-box u-flex">
				<view class="title">收货地址</view>
				<u-icon name="map" color="#666"></u-icon>
				<input type="text" @click="showadd = !0" disabled :value="province ? `${province} ${city} ${county}` : ''" placeholder="点击选择收货地址"/>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
			<view class="line-box u-flex">
				<view class="title">详细地址</view>
				<input type="text" v-model="address" placeholder="请填写详细地址"/>
			</view>
			<view class="line-box u-flex">
				<view class="title">生日日期</view>
				<input type="text" placeholder="请选择" :value="birthday" disabled @click="show = !0"/>
			</view>
		</view>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
		<view class="add-mc u-flex safe-area-inset-bottom">
			<view @click="saveInfo()">保存</view>
		</view>
		
		<city-select v-if="showadd" :defaultRegion="defaultRegion" v-model="showadd" @city-change="cityChange"></city-select>
		
		<!-- 日历控件 -->
		<u-calendar @change="calendarChange" v-model="show" mode="date" toolTip="请选择生日日期" btn-type="warning" active-bg-color="#ff9900" range-color="#ff9900" safe-area-inset-bottom :mask-close-able="false"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:!1,
				birthday:'',
				job:'',
				real_name:'',
				mobile:'',
				province:'',
				city:'',
				county:'',
				address:'',
				showadd:!1,
				defaultRegion:[]
			}
		},
		methods: {
			calendarChange(e){
				this.birthday = `${e.year}-${e.month}-${e.day}`
			},
			saveInfo(){
				this.$u.api.saveInfo({
					job:this.job,
					real_name:this.real_name,
					mobile:this.mobile,
					province:this.province,
					city:this.city,
					county:this.county,
					address:this.address,
					birthday:this.birthday
				}).then(res=>{
					this.$u.toast('保存成功')
				})
			},
			cityChange(e){
				this.province = e.province.label
				this.city = e.city.label
				this.county = e.area.label
			}
		},
		onLoad() {
			this.$store.dispatch('userInfo',this).then(res=>{
				let family = res.family
				if(family){
					const {province,city,county,realName,mobile,birthday,address} = family
					this.real_name = realName || ''
					this.address = address || ''
					this.mobile = mobile || ''
					this.birthday = birthday || ''
					this.job = res.job || ''
					this.province = province || ''
					this.city = city || ''
					this.county = county || ''

					this.defaultRegion = [province,city,county]
				}
			})
		}
	}
</script>

<style lang="scss">
	.tit{padding: 25rpx 50rpx;color: #111;background-color: #F2F2F2;}
	
	.edit-panel{padding: 0 50rpx;
		.line-box{
			height: 100rpx;border-bottom: 1rpx solid #ddd;
			.title{width: 5em;font-weight: bold;font-size: 30rpx;white-space: nowrap;}
			input{flex: 1;}
		}
	}
	
	.add-mc{
		position: fixed;width: 100%;height: 100rpx;justify-content: center;z-index: 9;left: 0;bottom: 0;box-sizing: content-box;
		view{background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);;color: #fff;font-size: 30rpx;text-align: center;width: 100%;margin: 0 50rpx;border-radius: 100rpx;height: 70rpx;line-height: 70rpx;}
	}
</style>
